@extends('layouts.admin')


@section('content')
    <div class="row">
        <h3>资源汇总</h3>
        <table class="table table-hover table-condensed">
            <th>id</th>
            <th>icon</th>
            <th>key</th>
            <th>description</th>
            <th>created at</th>
            <th><span class="glyphicon glyphicon-edit"></span></th>
            <tbody>
            @foreach($images as $image)
                <tr>
                    <td>{{$image->id}}</td>
                    <td><img src="{{$image->squareImage(50)}}"></td>
                    <td>{{$image->key}}</td>
                    <td><a href={{route('image.edit',[$image])}}>{{$image->description}}</a></td>
                    <td>{{$image->created_at->diffForHumans()}}</td>
                    <td>
                        <a href={{route('image.edit',[$image])}}>
                            <span class="glyphicon glyphicon-pencil"></span>
                        </a>

                    </td>

                </tr>
            @endforeach
            </tbody>
        </table>
        {{ $images->render() }}
    </div>

        <div class="row">

            {{--@include('image.carousel')--}}
            {{--@include('partials.imageGallery')--}}
        </div>
    <h2> carousel</h2>
    <div class="row">

        <div class="col-md-offset-1 col-md-10" id="slider">
        @foreach($images as $image)
            <div class="center-block">
                <img class="center-block" data-lazy="{{$image->water_mark}}" src="{{config('app.QNImageUrl').'/FifWZI_3HwPcyYqoDdp1M4MG8WGJ'}}" alt="{{$image->description}}" height="400">
            </div>
        @endforeach
        </div>
    </div>


@endsection

@section('scripts')
    <script>
//        $(document).ready(function(){
            $('#slider').slick({
                dots: true,
                infinite: true,
                speed: 500,
                fade: true,
                cssEase: 'linear',

                responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                    // You can unslick at a given breakpoint now by adding:
                    // settings: "unslick"
                    // instead of a settings object
                ]
            });
//        });

    </script>
@endsection